<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
				list-style: none;
			}
			.box{
				width: 300px;
				height: 200px;
				border: 1px solid #000;   
			    margin: 20px auto;
			}
			.btnList:after{
				display: block;
				clear: both;
				content: "";
			}
			.btnList input{
				width: 100px;
				height: 30px;
				background:#f5f5f5;
				float: left;
			}
			.btnList input.active{
				background: deeppink;
				color: #fff;
			}
			.content{
				width: 300px;
				height: 170px;
			}
			.content li{
				width: 100%;
				height: 100%;
				display: none;
			}
			.content li.show{
				display: block;
			}
		</style>
	</head>
	<body>
		<div class="box" id="box">
			<section class="btnList">
				<input type="button" class="active" value="按钮1" />
				<input type="button" value="按钮2" />
				<input type="button" value="按钮3" />
			</section>
			<ul class="content">
				<li class="show">内容1</li>
				<li>内容2</li>
				<li>内容3</li>
			</ul>
		</div>
		<div class="box" id="box2">
			<section class="btnList">
				<input type="button" class="active" value="按钮1" />
				<input type="button" value="按钮2" />
				<input type="button" value="按钮3" />
			</section>
			<ul class="content">
				<li class="show">内容1</li>
				<li>内容2</li>
				<li>内容3</li>
			</ul>
		</div>
		
		<script src="js/tab1.js"></script>
		<script>
		    
			window.onload=function(){
				new Tab("#box");
				new Tab("#box2");
			}
			
		</script>
	</body>
</html>
